<template>
  <view class="container">
    <!-- 优惠券列表 -->
    <view v-if="coupons.length > 0" class="coupon-list">
      <view v-for="(coupon, index) in coupons" :key="index" class="coupon-item">
        <view class="coupon-left">
          <text class="amount">¥{{ coupon.amount }}</text>
          <text class="condition">满{{ coupon.minAmount }}元可用</text>
        </view>
        <view class="coupon-right">
          <text class="title">{{ coupon.title }}</text>
          <text class="desc">{{ coupon.description }}</text>
          <text class="date">有效期至：{{ coupon.expireDate }}</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <image class="empty-image" src="/static/empty-coupon.png" mode="aspectFit" />
      <text class="empty-text">您还没有优惠券</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

interface Coupon {
  id: string;
  title: string;
  description: string;
  amount: number;
  minAmount: number;
  expireDate: string;
}

const coupons = ref<Coupon[]>([]);

// 获取优惠券数据
const fetchCoupons = () => {
  // 这里添加获取优惠券的接口请求
  // 示例数据
  const mockCoupons = [
    {
      id: '1',
      title: '新人专享券',
      description: '新用户专享优惠',
      amount: 10,
      minAmount: 100,
      expireDate: '2024-12-31'
    },
    {
      id: '2',
      title: '满减优惠券',
      description: '全场通用',
      amount: 20,
      minAmount: 200,
      expireDate: '2024-12-31'
    }
  ];

  // 模拟接口请求
  setTimeout(() => {
    coupons.value = mockCoupons;
  }, 500);
};

onMounted(() => {
  fetchCoupons();
});
</script>

<style>
.container {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.coupon-item {
  display: flex;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.coupon-left {
  width: 120px;
  background-color: #ff3b30;
  color: #ffffff;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.amount {
  font-size: 24px;
  font-weight: bold;
}

.condition {
  font-size: 12px;
  margin-top: 5px;
}

.coupon-right {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.desc {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}

.date {
  font-size: 12px;
  color: #999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
}

.empty-image {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 16px;
  color: #999;
}
</style> 